<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./public/css/bootstrap.min.css">
    <style type="text/css">
        #box{
            width: 100%;
            height: 500px;
            padding: 50px;
            border: 5px solid #f90;
            border-radius: 50px;
            overflow: hidden;
        }
        .mt50{
            margin-top: 50px;
        }
    </style>
    <script src="./jquery-1.8.3.min.js"></script>
    <script src="./public/js/holder.min.js"></script>

</head>
<body>
    

    <div class="container">
        <h1>JQ 新闻滚动效果</h1>
        <hr>

        <div id="box">
            <ul class="media-list">
                <li class="media mt50">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="holder.js/100x100">
                        </a>
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading">Media heading 1</h3>
                        <p>我是个新闻的内容...我容..我是个新闻的内容..我是个新闻的内容.. <a href="#">查看详情</a></p>
                    </div>
                </li>
                <li class="media mt50">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="holder.js/100x100">
                        </a>
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading">Media heading 2</h3>
                        <p>我是个新闻的内容...我容..我是个新闻的内容..我是个新闻的内容.. <a href="#">查看详情</a></p>
                    </div>
                </li>
                <li class="media mt50">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="holder.js/100x100">
                        </a>
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading">Media heading 3</h3>
                        <p>我是个新闻的内容...我容..我是个新闻的内容..我是个新闻的内容.. <a href="#">查看详情</a></p>
                    </div>
                </li>
                <li class="media mt50">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="holder.js/100x100">
                        </a>
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading">Media heading 4</h3>
                        <p>我是个新闻的内容...我容..我是个新闻的内容..我是个新闻的内容.. <a href="#">查看详情</a></p>
                    </div>
                </li>
                <li class="media mt50">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="holder.js/100x100">
                        </a>
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading">Media heading 5</h3>
                        <p>我是个新闻的内容...我容..我是个新闻的内容..我是个新闻的内容.. <a href="#">查看详情</a></p>
                    </div>
                </li>
                <li class="media mt50">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="holder.js/100x100">
                        </a>
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading">Media heading 6</h3>
                        <p>我是个新闻的内容...我容..我是个新闻的内容..我是个新闻的内容.. <a href="#">查看详情</a></p>
                    </div>
                </li>
                <li class="media mt50">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="holder.js/100x100">
                        </a>
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading">Media heading 7</h3>
                        <p>我是个新闻的内容...我容..我是个新闻的内容..我是个新闻的内容.. <a href="#">查看详情</a></p>
                    </div>
                </li>
                <li class="media mt50">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="holder.js/100x100">
                        </a>
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading">Media heading 8</h3>
                        <p>我是个新闻的内容...我容..我是个新闻的内容..我是个新闻的内容.. <a href="#">查看详情</a></p>
                    </div>
                </li>
                <li class="media mt50">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="holder.js/100x100">
                        </a>
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading">Media heading 9</h3>
                        <p>我是个新闻的内容...我容..我是个新闻的内容..我是个新闻的内容.. <a href="#">查看详情</a></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>


    <script>

        setInterval(function (){
            $('.media-list li')
            .last().fadeTo(0,0).hide()
            .prependTo('.media-list').slideDown(1000).fadeTo(1000,1);
        }, 3000);
        
    </script>
</body>
</html>
